<template>
	<view class="uni-paginator">
		<!-- 上一页按钮（保持不变） -->
		<view class="paginator-btn" :class="{ disabled: currentPage === 1 }" @click="handlePrevPage">
			<text>上一页</text>
		</view>

		<!-- 页码列表 -->
		<view class="paginator-numbers">
			<!-- 首页：修改点击事件 -->
			<view class="paginator-number" :class="{ active: currentPage === 1 }" @click="handlePageClick(1)">
				1
			</view>

			<!-- 省略号（保持不变） -->
			<view class="paginator-ellipsis" v-if="showPrevEllipsis">...</view>

			<!-- 中间页码：修改点击事件 -->
			<view v-for="page in middlePages" :key="page" class="paginator-number"
				:class="{ active: currentPage === page }" @click="handlePageClick(page)">
				{{ page }}
			</view>

			<!-- 省略号（保持不变） -->
			<view class="paginator-ellipsis" v-if="showNextEllipsis">...</view>

			<!-- 尾页：修改点击事件 -->
			<view class="paginator-number" :class="{ active: currentPage === totalPages }"
				@click="handlePageClick(totalPages)" v-if="totalPages > 1">
				{{ totalPages }}
			</view>
		</view>

		<!-- 下一页按钮（保持不变） -->
		<view class="paginator-btn" :class="{ disabled: currentPage === totalPages }" @click="handleNextPage">
			<text>下一页</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UniPaginator',
		props: {
			// 当前页码
			currentPage: {
				type: Number,
				default: 1
			},
			// 每页显示数量
			pageSize: {
				type: Number,
				default: 10
			},
			// 总记录数
			total: {
				type: Number,
				default: 0
			}
		},
		computed: {
			// 计算总页数
			totalPages() {
				return Math.ceil(this.total / this.pageSize);
			},
			// 计算中间显示的页码
			middlePages() {
				let pages = [];
				// 如果总页数小于等于5，直接显示所有页码
				if (this.totalPages <= 5) {
					for (let i = 2; i < this.totalPages; i++) {
						pages.push(i);
					}
				} else {
					// 当前页在前面时
					if (this.currentPage <= 3) {
						pages = [2, 3, 4, 5];
					}
					// 当前页在后面时
					else if (this.currentPage >= this.totalPages - 2) {
						pages = [
							this.totalPages - 4,
							this.totalPages - 3,
							this.totalPages - 2,
							this.totalPages - 1
						];
					}
					// 当前页在中间时
					else {
						pages = [
							this.currentPage - 2,
							this.currentPage - 1,
							this.currentPage,
							this.currentPage + 1,
							this.currentPage + 2
						];
					}
				}
				return pages;
			},
			// 是否显示前省略号
			showPrevEllipsis() {
				return this.totalPages > 5 && this.currentPage > 3;
			},
			// 是否显示后省略号
			showNextEllipsis() {
				return (
					this.totalPages > 5 && this.currentPage < this.totalPages - 2
				);
			}
		},
		methods: {
			// 上一页
			handlePrevPage() {
				if (this.currentPage > 1) {
					this.$emit('update:currentPage', this.currentPage - 1);
					this.$emit('change', this.currentPage - 1);
				}
			},
			// 下一页
			handleNextPage() {
				if (this.currentPage < this.totalPages) {
					this.$emit('update:currentPage', this.currentPage + 1);
					this.$emit('change', this.currentPage + 1);
				}
			},
			// 新增：处理页码点击
			handlePageClick(page) {
				if (page !== this.currentPage) { // 避免重复点击
					this.$emit('update:currentPage', page); // 通知父组件更新页码（用于v-model）
					this.$emit('change', page); // 触发change事件（用于父组件监听）
				}
			},
		}
	}
</script>

<style lang="scss">
	.uni-paginator {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		font-size: 14px;

		.paginator-btn {
			min-width: 80px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			border: 1px solid #ebeef5;
			border-radius: 4px;
			margin: 0 4px;
			cursor: pointer;
			user-select: none;

			&.disabled {
				color: #c0c4cc;
				cursor: not-allowed;
				background-color: #fff;
				border-color: #ebeef5;
			}
		}

		.paginator-numbers {
			display: flex;
			align-items: center;
			margin: 0 4px;

			.paginator-number {
				min-width: 32px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				border: 1px solid #ebeef5;
				border-radius: 4px;
				margin: 0 2px;
				cursor: pointer;
				user-select: none;

				&.active {
					background-color: #005aca;
					color: #fff;
					border-color: #409eff;
				}
			}

			.paginator-ellipsis {
				min-width: 32px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				margin: 0 2px;
			}
		}

		.paginator-jump {
			display: flex;
			align-items: center;
			margin-left: 15px;

			.paginator-input {
				width: 50px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				border: 1px solid #ebeef5;
				border-radius: 4px;
				margin: 0 5px;
				padding: 0 5px;
			}

			.paginator-jump-btn {
				min-width: 50px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				border: 1px solid #ebeef5;
				border-radius: 4px;
				margin-left: 5px;
				cursor: pointer;
				user-select: none;
			}
		}
	}
</style>